<!DOCTYPE html>
<html>
<head>
	<title>VidyoConnector</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
	<script>if (window.module) module = window.module;</script>

	<!-- We've provide some simple styling to get you started. -->
	<link   href="VidyoConnector.css" rel="stylesheet" type="text/css" >
  <link href="VidyoTextChat.css" rel="stylesheet" type="text/css" >

	<!-- Here we load the application which knows how to
	invoke the VidyoConnector API. -->
	<script src="VidyoConnector.js"></script>
  <script src="VidyoTextChat.js"></script>
	<script type="text/javascript">
	function onVidyoClientLoaded(status) {
		console.log("Status: " + status.state + "Description: " + status.description);
		switch (status.state) {
			case "READY":    // The library is operating normally
				$("#connectionStatus").html("Ready to Connect");
				$("#helper").addClass("hidden");
				window.VC = new window.VidyoClientLib.VidyoClient('', () => {
          // After the VidyoClient is successfully initialized a global VC object will become available
          // All of the VidyoConnector gui and logic is implemented in VidyoConnector.js
          StartVidyoConnector(VC, window.VCUtils ? window.VCUtils.params.webrtc : 'true');
        });
				break;
			case "RETRYING": // The library operating is temporarily paused
				$("#connectionStatus").html("Temporarily unavailable retrying in " + status.nextTimeout/1000 + " seconds");
				break;
			case "FAILED":   // The library operating has stopped
				ShowFailed(status);
				$("#connectionStatus").html("Failed: " + status.description);
				break;
			case "FAILEDVERSION":   // The library operating has stopped
				UpdateHelperPaths(status);
				ShowFailedVersion(status);
				$("#connectionStatus").html("Failed: " + status.description);
				break;
			case "NOTAVAILABLE": // The library is not available
				UpdateHelperPaths(status);
				$("#connectionStatus").html(status.description);
				break;
		}
		return true; // Return true to reload the plugins if not available
	}
	function UpdateHelperPaths(status) {
		$("#helperPlugInDownload").attr("href", status.downloadPathPlugIn);
		$("#helperAppDownload").attr("href", status.downloadPathApp);
	}
	function ShowFailed(status) {
		var helperText = '';
		 // Display the error
		helperText += '<h2>An error occurred, please reload</h2>';
		helperText += '<p>' + status.description + '</p>';

		$("#helperText").html(helperText);
		$("#failedText").html(helperText);
		$("#failed").removeClass("hidden");
	}
	function ShowFailedVersion(status) {
		var helperText = '';
		 // Display the error
		helperText += '<h4>Please Download a new plugIn and restart the browser</h4>';
		helperText += '<p>' + status.description + '</p>';

		$("#helperText").html(helperText);
	}

	function loadVidyoClientLibrary(webrtc, plugin) {
		// If webrtc, then set webrtcLogLevel
		var webrtcLogLevel = "";
		if (webrtc) {
			// Set the WebRTC log level to either: 'info' (default), 'error', or 'none'
			webrtcLogLevel = '&webrtcLogLevel=info';
		}
		alert(1)
		//We need to ensure we're loading the VidyoClient library and listening for the callback.
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = '../javascript/VidyoClient/VidyoClient.js?onload=onVidyoClientLoaded&webrtc=' + webrtc + '&plugin=' + plugin + webrtcLogLevel;
		document.getElementsByTagName('head')[0].appendChild(script);
	}

 	function loadNativeScipWebRTCVidyoClientLibrary() {
		// Assumes that this file is hosted in the Hookflash build environment
		// TODO: update path
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = '../latest_build/VidyoClient.js';
        script.onload = function() {
          onVidyoClientLoaded({ state: 'READY', description: 'Native SCIP + WebRTC' });
        };
		document.getElementsByTagName('head')[0].appendChild(script);
		var style = document.createElement('link');
		style.rel = 'stylesheet';
		style.type = 'text/css';
		style.href = '../latest_build/VidyoClient.css';
		document.getElementsByTagName('head')[0].appendChild(style);
	}

	function loadWebRTCControlPanel() {
        let style = document.createElement('link');
        style.rel = 'stylesheet';
        style.type = 'text/css';
        style.href = './WCtrlPanel.css';
        document.querySelector('head').appendChild(style);
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = './WCtrlPanel.js';
        document.querySelector('head').appendChild(script);
    }

	function joinViaBrowser() {
		$("#helperText").html("Loading...");
		$("#helperPicker").addClass("hidden");
		loadVidyoClientLibrary(true, false);
	}

	function joinViaPlugIn() {
		$("#helperText").html("Don't have the PlugIn?");
		$("#helperPicker").addClass("hidden");
		$("#helperPlugIn").removeClass("hidden");
		loadVidyoClientLibrary(false, true);
	}

	function joinViaElectron() {
		$("#helperText").html("Electron...");
		$("#helperPicker").addClass("hidden");
		loadVidyoClientLibrary(false, true);
	}

	function joinViaApp() {
		$("#helperText").html("Don't have the app?");
		$("#helperPicker").addClass("hidden");
		$("#helperApp").removeClass("hidden");
		var protocolHandlerLink = 'vidyoconnector://' + window.location.search;
		/* launch */
		$("#helperAppLoader").attr('src', protocolHandlerLink);
		loadVidyoClientLibrary(false, false);
	}

	function joinViaOtherApp() {
		$("#helperText").html("Don't have the app?");
		$("#helperPicker").addClass("hidden");
		$("#helperOtherApp").removeClass("hidden");
		var protocolHandlerLink = 'vidyoconnector://' + window.location.search;
		/* launch */
		$("#helperOtherAppLoader").attr('src', protocolHandlerLink);
		loadVidyoClientLibrary(false, false);
	}

 	function joinViaNativeScipWebRTCApp() {
		let alink = document.getElementById('joinBtn');
		let imgClickJoin = document.getElementById('imgClickJoin');
		alink.classList.add('not-active');
		alink.removeAttribute("href");
		imgClickJoin.removeAttribute("onclick");
		alink.innerHTML = '<div class="loader"></div>';
		loadNativeScipWebRTCVidyoClientLibrary();
		loadWebRTCControlPanel();
	}

	function loadHelperOptions() {
		var userAgent = navigator.userAgent || navigator.vendor || window.opera;
		// Opera 8.0+
		var isOpera = (userAgent.indexOf("Opera") || userAgent.indexOf('OPR')) != -1 ;
		// Firefox
		var isFirefox = userAgent.indexOf("Firefox") != -1;
		// Chrome 1+
		var isChrome = userAgent.indexOf("Chrome") != -1;
		// Safari
		var isSafari = !isChrome && userAgent.indexOf("Safari") != -1;
		// AppleWebKit
		var isAppleWebKit = !isSafari && !isChrome && userAgent.indexOf("AppleWebKit") != -1;
		// Internet Explorer 6-11
		var isIE = (userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true );
		// Edge 20+
		var isEdge = !isIE && !!window.StyleMedia;
		// Check if Mac
		var isMac = navigator.platform.indexOf('Mac') > -1;
		// Check if Windows
		var isWin = navigator.platform.indexOf('Win') > -1;
		// Check if Linux
		var isLinux = navigator.platform.indexOf('Linux') > -1;
		// Check if Android
		var isAndroid = userAgent.indexOf("android") > -1;

		if (!isMac && !isWin && !isLinux) {
			/* Mobile App*/
			if (isAndroid) {
				$("#joinViaApp").removeClass("hidden");
			} else {
				$("#joinViaOtherApp").removeClass("hidden");
			}
			if (isChrome || isSafari) {
				/* Supports WebRTC */
				$("#joinViaBrowser").removeClass("hidden");

				// Native Xmpp WebRTC client only supports Chrome and Safari currently
				$("#joinViaBrowserNativeXmppWebRTC").removeClass("hidden");
			}
		} else {
			/* Desktop App */
			$("#joinViaApp").removeClass("hidden");

			if (isChrome || isFirefox) {
				/* Supports WebRTC */
				$("#joinViaBrowser").removeClass("hidden");
			}

 			if (isChrome || isSafari || isFirefox) {
				// Native Xmpp WebRTC client only supports Chrome currently
				$("#joinViaBrowserNativeXmppWebRTC").removeClass("hidden");
			}

			if (isSafari || isFirefox || (isAppleWebKit && isMac) || (isIE && !isEdge)) {
				/* Supports Plugins */
				$("#joinViaPlugIn").removeClass("hidden");
			}
		}

		if(isSafari) {
		  $("#enableUnifiedPlanCbx").addClass('hidden');
      $("#windowSharesContainer").addClass('hidden');
      $("#monitorSharesContainer").addClass('hidden');
    } else {
      $("#windowSharesSafari").addClass('hidden');
      $("#monitorSharesSafari").addClass('hidden');
    }
	}

	// Runs when the page loads
	$(function() {
		var connectorType = getUrlParameterByName("connectorType");
		var isElectron = (typeof process === 'object') && process.versions && (process.versions.electron !== undefined);
		if (connectorType == "app") {
			joinViaApp();
		} else if (connectorType == "browser") {
			joinViaBrowser();
		} else if (connectorType == "plugin") {
			joinViaPlugIn();
		} else if (connectorType == "other") {
			joinViaOtherApp();
		} else {
			if (isElectron) {
				joinViaElectron();
			} else {
				loadHelperOptions();
			}
		}
	});

	</script>
</head>

<!-- We execute the VidyoConnectorApp library on page load
to hook up all of the events to elements. -->
<body id="vidyoConnector">
		<div id="log-popup">
				<!-- Modal content -->
				<div class="popup-content">
					<span class="close">&times;</span>
					<table id="log-table">
						<tr id="levels">
							<th>
								<label class="container">Enable all
									<input type="checkbox" value="all" id="enable-all">
									<span class="checkmark"></span>
								</label>
							</th>
						</tr>
					</table>
				</div>
			</div>
	<!-- This button toggles the visibility of the options. -->
	<button id="optionsVisibilityButton" title="Toggle Options" class="optionsVisibiliyButtonElements hideOptions hidden"></button>

	<div id="options" class="vidyo-hide-options">
		<img class="logo" src="Images/VidyoIcon.png"/>

		<form>
		<div id="optionsParameters">
		<p>
			<!-- The host of our backend service. -->
			<label>Host</label>
			<input type="text" id="host" value="">
		</p>
		<p>
			<!-- The Hunter portal room's roomKey. -->
			<label>Room Key</label>
			<input type="text" id="roomKey" placeholder="room-key" value="">
		</p>
		<p class="hidden">
			<!-- A token that is derived from the deveoper key assigned to your account which will allow access for this particular instance.
			The token will contain its expiration date and the user ID.
			For more information visit the developer section of http://vidyo.io -->
			<label>Token</label>
			<input type="text" id="token" placeholder="token" value="">
		</p>
		<p>
			<!-- This is the display name that other users will see.
			-->
			<label for="displayName">Display Name</label>
			<input id="displayName" type="text" placeholder="Display Name" value="webRTC Guest">
		</p>
		<p>
			<!-- This is the display name that other users will see.
			-->
			<label for="loggerURL">Logger Url</label>
			<input id="loggerURL" type="text" placeholder="Logger Url">
		</p>
		<p>
			<label for="roomPin">roomPin</label>
			<input id="roomPin" type="text" placeholder="roomPin">
		</p>
		<p class="hidden">
			<!-- This is the "room" or "space" to which you're connecting
			the user. Other users who join this same Resource will be able to see and hear each other.
			-->
			<label for="resourceId">Resource ID</label>
			<input id="resourceId" type="text" placeholder="Conference Reference" value="">
		</p>
		</div>
		<p>
			<!-- On page load, this input is filled with a list of all the available cameras on the user's system. -->
			<label for="cameras">Camera</label>
			<select id="cameras">
				<option value='0'>None</option>
			</select>
		</p>
		<p>
			<!-- On page load, this input is filled with a list of all the available microphones on the user's system. -->
			<label for="microphones">Microphone</label>
			<select id="microphones">
				<option value='0'>None</option>
			</select>
		</p>
		<p>
			<!-- On page load, this input is filled with a list of all the available microphones on the user's system. -->
			<label for="speakers">Speaker</label>
			<select id="speakers">
				<option value='0'>None</option>
			</select>
		</p>
		<p>
			<!-- On page load, this input is filled with a list of all the available cameras on the user's system. -->
			<label for="cameraShare">Camera Share</label>
			<select id="cameraShare">
				<option value='0'>None</option>
			</select>
		</p>
		<p id="monitorShareParagraph">
			<!-- On page load, this input is filled with a list of all the available monitor shares on the user's system. -->
			<label for="monitorShares">Monitor Share</label>
      <span id="monitorSharesContainer">
        <select id="monitorShares">
          <option value='0'>None</option>
        </select>
      </span>
      <span id="monitorSharesSafari" class="monitorSharesSafari"><button id="monitorSharesButtonNone">None</button></span>
		</p>
		<p>
			<!-- On page load, this input is filled with a list of all the available window shares on the user's system. -->
      <label for="windowShares">Window Share</label>
      <span id="windowSharesContainer">
        <select id="windowShares">
          <option value='0'>None</option>
        </select>
      </span>
      <span id="windowSharesSafari" class="windowSharesSafari"><button id="windowSharesButtonNone">None</button></span>
		</p>
		<p>
			<label for="extData">ExtData</label>
			<input id="extData" type="text" placeholder="ExtData">
		</p>
		<p>
			<label for="extDataType">ExtDataType</label>
			<input id="extDataType" type="text" placeholder="ExtDataType">
		</p>
		<fieldset id="advancedSettings" class="hiddenPermanent">
			<legend>Advanced Settings</legend>
			<p>
				<div id="showLogs">Show Log Levels</div>
			</p>
			<p>
				<label for="advanced-disableStats">Disable Stats (reconnect)</label>
				<input type="checkbox" id="advanced-disableStats">
			</p>
			<p>
				<label for="advanced-enableSimulcast">Enable Simulcast</label>
				<input type="checkbox" id="advanced-enableSimulcast">
			</p>
			<p>
				<label for="advanced-enableTransportCc">Enable Transport CC</label>
				<input type="checkbox" id="advanced-enableTransportCc">
			</p>
			<p id="enableUnifiedPlanCbx">
				<label for="advanced-enableUnifiedPlan">Enable UnifiedPlan</label>
				<input type="checkbox" id="advanced-enableUnifiedPlan">
			</p>
			<p>
				<label for="advanced-showStatisticsOverlay">Show Statistics Overlay</label>
				<input type="checkbox" id="advanced-showStatisticsOverlay">
			</p>
			<p>
				<label for="advanced-enableAudioOnlyMode">Enable Audio-Only mode</label>
				<input type="checkbox" id="advanced-enableAudioOnlyMode">
			</p>
			<p>
				<label for="advanced-enableAutoReconnect">Enable Auto-Reconnect</label>
				<input type="checkbox" id="advanced-enableAutoReconnect">
			</p>
			<p>
				<label for="advanced-maxReconnectAttempts">Max Reconnect Attempts</label>
				<input type="number" id="advanced-maxReconnectAttempts">
			</p>
			<p>
				<label for="advanced-reconnectBackoff">Reconnect Backoff</label>
				<input type="number" id="advanced-reconnectBackoff">
			</p>
			<p>
				<ul class="apiLogger">
					<li>
						<div>Enable API logging</div>
						<ul>
							<li>
								<p>
									<label for="advanced-loggingSimpleAPIMethods">Simple API logging</label>
									<input type="checkbox" id="advanced-loggingSimpleAPIMethods">
								</p>
							</li>
							<li>
								<p>
									<label for="advanced-loggingVidyoConnectorAPI">VidyoConnector API logging</label>
									<input type="checkbox" id="advanced-loggingVidyoConnectorAPI">
								</p>
							</li>
						</ul>
					</li>
				</ul>
			</p>
			<p>
				<label for="advanced-participantLimit">Participant Limit</label>
				<input type="number" id="advanced-participantLimit">
			</p>
		</fieldset>
		</form>
		<div id="messages">
			<!-- All Vidyo-related messages will be inserted into these spans. -->
			<span id="error"></span>
			<span id="message"></span>
		</div>
	</div>
	<!-- This is the div into which the Vidyo component will be inserted. -->
	<div id="renderer" class="rendererWithOptions pluginOverlay hidden rendererWithoutChat">
	</div>
	<div id="toolbarLeft" class="toolbar">
		<span id="participantStatus"></span>
	</div>
	<div id="toolbarCenter" class="toolbar">
		<div>
			<!-- This button toggles the camera privacy on or off. -->
			<div id="webcasting" title="Webcasting" class="toolbarButton"></div>
			<div id="recorder" title="Record Status" class="toolbarButton"></div>
			<button id="cameraButton" title="Camera Privacy" class="toolbarButton cameraOn"></button>

			<!-- This button joins and leaves the conference. -->
			<button id="joinLeaveButton" title="Join Conference" class="toolbarButton callStart"></button>

			<!-- This button mutes and unmutes the users' microphone. -->
			<button id="microphoneButton" title="Microphone Privacy" class="toolbarButton microphoneOn"></button>
			<!-- This button turns on/off the users' speaker. -->
			<button id="speakerButton" title="Speaker Privacy" class="toolbarButton speakerOn"></button>
      <!-- This button toggles the chat window. -->
      <button id="chatButton" title="Toggle Chat" class="notification toolbarButton chaticon">
        <span class="badge hidden" id="new-message-notification"></span>
      </button>
		</div>
	</div>
	<div id="toolbarRight" class="toolbar">
		<span id="connectionStatus">Initializing</span>
		<span id="clientVersion"></span>
	</div>
	<div id="helper">
		<table>
		<tr>
			<td><img class="logo" src="Images/VidyoIO-LogoHorizontal-Dark@2x.png"/></td>
		</tr>
		<tr>
			<td id="helperText">How would you like to join the call?</td>
		</tr>
		<tr id="helperPicker">
			<td >
				<table>
				<tr>
					<td id="joinViaBrowserNativeXmppWebRTC" class="hidden">
						<div class="helperHeader">
							<img src="Images/web.svg" onclick="javascript:joinViaNativeScipWebRTCApp()" id="imgClickJoin"/>
						</div>
						<ul>
							<li class="helperCheck"><img src="Images/checkmark.svg" />&nbsp;&nbsp; Join the call immediately
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg" />&nbsp;&nbsp; No downloads or installations
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg" />&nbsp;&nbsp; Best quality
							</li>
						</ul>
						<div class="helperFooter">
							<a href="javascript:joinViaNativeScipWebRTCApp()" id="joinBtn">Join via the browser</a>
						</div>
					</td>
					<td id="joinViaPlugIn" class="hidden">
						<div class="helperHeader">
							<img src="Images/download.svg" onclick="javascript:joinViaPlugIn()"/>
						</div>
						<ul>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Join meetings right from the browser
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Share seamlessly without extensions
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Best quality
							</li>
						</ul>
						<div class="helperFooter">
							<a href="javascript:joinViaPlugIn()">Join via the plugin</a>
						</div>
					</td>
					<td id="joinViaApp" class="hidden">
						<div class="helperHeader">
							<img src="Images/desktop.svg" onclick="javascript:joinViaApp()"/>
						</div>
						<ul>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Join meetings faster with fewer clicks
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Share seamlessly without extensions
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Best quality
							</li>
						</ul>
						<div class="helperFooter">
							<a href="javascript:joinViaApp()">Join via the app</a>
						</div>
                    </td>
					<td id="joinViaOtherApp" class="hidden">
						<div class="helperHeader">
							<img src="Images/download.svg" onclick="javascript:joinViaOtherApp()"/>
						</div>
						<ul>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Join from any device
							</li>
							<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
								Best quality
							</li>
						</ul>
						<div class="helperFooter">
							<a href="javascript:joinViaOtherApp()">Join via the app</a>
						</div>
                    </td>
				</tr>
				</table>
			</td>
		</tr>
		<tr id="helperPlugIn" class="hidden">
			<td>
				<div class="helperHeader">
					<img src="Images/download.svg" onclick="javascript:joinViaBrowser()"/>
				</div>
				<ul>
					<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
						Download and install it now
					</li>
					<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
						The plugin will launch automatically once installed
					</li>
				</ul>
				<div class="helperFooter">
					<a id="helperPlugInDownload" href="">Download</a>
				</div>
			</td>
		</tr>
		<tr id="helperApp" class="hidden">
			<td>
				<div class="helperHeader">
					<img src="Images/download.svg" onclick="javascript:joinViaApp()"/>
				</div>
				<div><iframe id="helperAppLoader" src="" class="hidden"></iframe></div>
				<ul>
					<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
						Download and install it now
					</li>
					<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
						Launch once installed
					</li>
				</ul>
				<div class="helperFooter">
					<a id="helperAppDownload" href="">Download</a>
					<a href="javascript:joinViaApp()">Launch</a>
				</div>
			</td>
		</tr>
		<tr id="helperOtherApp" class="hidden">
			<td>
				<div class="helperHeader">
					<img src="Images/download.svg" onclick="javascript:joinViaOtherApp()"/>
				</div>
				<div><iframe id="helperOtherAppLoader" src="" class="hidden"></iframe></div>
				<ul>
					<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
						Build and install from the SDK
					</li>
					<li class="helperCheck"><img src="Images/checkmark.svg"/>&nbsp;&nbsp;
						Launch once installed
					</li>
				</ul>
				<div class="helperFooter">
					<a href="javascript:joinViaOtherApp()">Launch</a>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="downloadContainerLegal">
					By clicking &quot;Join&quot; or &quot;Download&quot;, you agree to our <a target="_blank" style="color: #6a6a6a;" href="http://www.vidyo.com/eula/">End-User License Agreement</a> & <a target="_blank" style="color: #6a6a6a;" href="http://www.vidyo.com/privacy-policy/">Privacy Policy</a>.
				</div>
        	</td>
		</tr>
		</table>
	</div>
	<div id="failed" class="hidden">
		<table>
		<tr>
			<td><img class="logo" src="Images/VidyoIcon.png"/></td>
		</tr>
		<tr>
			<td id="failedText">Error</td>
		</tr>
		</table>
	</div>
  <div class="chat-popup" id="myForm">
    <button id="chatTabButton" class="tablink">Chat</button>
    <button id="participantTabButton" class="tablink participantTabLink">Participants</button>
	<div class="tabcontent", id="participantTab">
      <table id="participantTable" class="ParticipantTable">
      </table>
    </div>
    <div class="tabcontent" id="chatTab">
      <div class="message-container" id="message-box">
      </div>
      <form onsubmit="return false;" id="messagingForm" class="form-container">
        <textarea placeholder="Type message.." name="msg" id="msg" required></textarea>
        <button type="submit" class="btn">Send</button>
      </form>
    </div>
  </div>
</body>
</html>
